<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嘟嘟的小部屋</title>
  <link href="./vendor/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="./style/panel.css" rel="stylesheet" />
  <link href="./style/timeline.css" rel="stylesheet" />
</head>
<body>
<div class="container">
  <div class="row text-center" style="margin-top: 10px;">
    <!-- <div class="col-xs-12 col-sm-12" style="color: blue; font-size:36px;">你好吗<br>很高兴认识你呢</div> -->
  </div>

  <!--
  <div class="row text-center" style="margin-top: 10px;">
    <div class="col-xs-12 col-sm-12">
      <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#reasonModal" >我承认我是一个逗逼</button>
    </div>
  </div>
  -->

  <div class="page-header">
    <h1 id="timeline">嘟嘟成长记</h1>
  </div>

  <div class="row">
    <div class="col-sm-12">
	  <div id="timeline-container"></div>
    </div><!-- col-sm-12 -->
  </div><!-- row -->
</div><!-- container -->
<!--
<div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelleby="reasonModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="reasonModalTitle">为什么你<strong>今天</strong>会觉得自己是个逗逼?</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <textarea class="form-control" id="reason" name="reason" rows="10"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">算了，我不是！</button>
        <button type="button" class="btn btn-success submit-button">确定</button>
      </div>
    </div>
  </div>
</div><!-- modal -->
<!-- <script src="./vendor/jquery/3.2.1/jquery.min.js"></script> -->
<!-- <script src="./vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<!-- <script src="./vendor/bootbox.js/4.4.0/bootbox.min.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootbox.js/4.4.0/bootbox.min.js"></script>

<script src="./data/comment.js"></script>
<script src="./script/timeline.js"></script>
<script>
	(function() {
		$('#timeline-container').timeline();
		var timeline = $('#timeline-container').data('timeline');
		timeline.render(demoData);
		/* TODO:
		$.ajax('data/comment.json').done(function(response) {
			console.info(response);
			timeline.render(response);
		}).error(function(a, b, c) {
			console.info(a, b, c);
			alert('Err: unknown error.');
		});
		*/
	})();
</script>
<script>
        $('.submit-button').on('click', function (e) {
                bootbox.alert('亲,这功能还没实现呢……');
        });
</script>
</body>
</html>
